{% extends 'base_dashboard.html' %}

{% block title %}Delete Module — Online LMS{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">Delete Module</h4>
        <p class="text-muted small mb-0">This action cannot be undone.</p>
    </div>
    <a href="{% url 'courses:manage_course' pk=object.course.pk %}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Back to Course
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4 text-center">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                     style="width:56px;height:56px;background:#fee2e2;">
                    <i class="bi bi-trash3-fill" style="color:#b91c1c;font-size:1.4rem;"></i>
                </div>
                <h5 class="fw-bold mb-1">Delete &ldquo;{{ object.title }}&rdquo;?</h5>
                <p class="text-muted small mb-4">
                    This will permanently delete <strong>{{ object.title }}</strong> and all
                    <strong>{{ object.lessons.count }} lesson{{ object.lessons.count|pluralize }}</strong> inside it.
                </p>
                <form method="post">
                    {% csrf_token %}
                    <div class="d-flex gap-2 justify-content-center">
                        <a href="{% url 'courses:manage_course' pk=object.course.pk %}"
                           class="btn btn-outline-secondary px-4">Cancel</a>
                        <button type="submit" class="btn btn-danger px-4 fw-semibold">
                            <i class="bi bi-trash3 me-1"></i>Yes, Delete Module
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}